<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="shortcut icon" href="../img/head.ico" type="image/x-icon" />
        <meta charset="utf-8" />
        <style>
            * {
                font: 'Segoe WPC', 'Segoe UI', 'HelveticaNeue-Light', sans-serif,
                    'Droid Sans Fallback';
            }

            .cb {
                font-size: 16px;
            }

            .bt {
                font-size: 16px;
            }

            .SH {
                background-color: #ffcc99;
                text-align: left;
                font-size: 14pt;
                color: #4a0095;
                cursor: pointer;
                text-decoration: none;
                font-weight: normal;
                margin-top: 6px;
                margin-bottom: 2px;
            }

            .SH:hover {
                text-decoration: underline;
                font-weight: bold;
            }

            #cy {
                width: 580px;
                height: 590px;
                display: block;
                margin-left: auto;
                margin-right: auto;
                border: dashed #00a837;
                margin-bottom: 5px;
            }

            #ca {
                width: 580px;
                height: 590px;
                display: block;
                margin-left: auto;
                margin-right: auto;
                border: dashed #00a837;
                margin-bottom: 5px;
            }

            #inputs {
                border: 1px solid;
                text-align: center;
                margin: auto auto;
            }

            #inputs tr td {
                border: 1px solid;
            }

            .input_style {
                width: 75px;
                text-align: center;
            }

            .title {
                width: 150px;
                text-align: center;
                margin: auto auto;
                font-size: 22px;
                font-weight: bold;
            }

            .current {
                font-weight: bold;
                color: red;
                /*font-size: 18px;*/
                text-decoration: underline;
            }

            .normal {
            }
        </style>
        <title>Graph theory tools</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/cytoscape-context-menus@3/cytoscape-context-menus.min.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/cytoscape-panzoom@2/cytoscape.js-panzoom.min.css"
        />

        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="../css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
        <script src="../js/bootstrap.min.js"></script>
        <script src="js/gui-layout.js"></script>

        <!-- Cola layout depends on weaver -->
        <script src="https://cdn.jsdelivr.net/npm/weaverjs@1/dist/weaver.min.js"></script>
        <!-- Edgehandles depend on Lodash -->
        <script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>
        <!-- Cola layout depends on WebCola -->
        <script src="https://cdn.jsdelivr.net/npm/webcola@3/WebCola/cola.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape@3/dist/cytoscape.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-cxtmenu@3/cytoscape-cxtmenu.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4/cytoscape-cose-bilkent.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-panzoom@2/cytoscape-panzoom.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-cola@2/cytoscape-cola.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-spread@2/cytoscape-spread.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-snap-to-grid@2/cytoscape-snap-to-grid.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-context-menus@3/cytoscape-context-menus.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3/cytoscape-edgehandles.min.js"></script>
    </head>

    <body style="width: 1440px; margin: auto auto; text-align: center">
        <table class="form-inline">
            <tr>
                <td style="width: 250px; text-align: center; vertical-align: top">
                    <div class="SH" onclick="ShowHide('layout_div', this)" style="margin-top: 2px;">
                        ◢ Layout
                    </div>
                    <div id="layout_div">
                        <p style="margin-top: 2px;margin-bottom: 3px; vertical-align: middle">
                            <label for="layout"></label>
                            <select
                                style="font-size: 17px; margin: 2px; width: 160px;"
                                id="layout"
                                onchange="changeLayout(this.selectedIndex)"
                            >
                                <option value="breadthfirst">Breadth First</option>
                                <option value="circle" selected>Circle</option>
                                <option value="cose-bilkent">CoSE-Bilkent</option>
                                <option value="cola">Cola</option>
                                <option value="grid">Grid</option>
                                <option value="random">Random</option>
                                <option value="snapToGrid">Snap to grid</option>
                                <option value="spread">Spread</option>
                            </select>
                            <button class="btn btn-info" onclick="reLayout()">
                                <i class="fa fa-refresh fa-1x" aria-hidden="true"></i>
                            </button>
                        </p>
                        <label for="autorefresh" class="cb checkbox">
                            <input id="autorefresh" type="checkbox" />Auto-refresh </label
                        >&nbsp;
                        <label for="hide_result" class="cb checkbox">
                            <input
                                id="hide_result"
                                type="checkbox"
                                onclick="hideResult(this);"
                            />Hide result </label
                        ><br />
                    </div>
                    <div class="SH" onclick="ShowHide('inputs_div', this)">◢ Inputs</div>
                    <div id="inputs_div">
                        <table id="inputs">
                            <tr>
                                <td>
                                    <label for="nid"></label>
                                    <input
                                        class="input_style"
                                        type="text"
                                        id="nid"
                                        value=""
                                        placeholder="number"
                                    /><br />
                                    <button class="btn btn-default" onclick="addNode(true, null)">
                                        Add nodes
                                    </button>
                                </td>
                                <td>
                                    <label for="weight"></label>
                                    <input
                                        class="input_style"
                                        type="text"
                                        id="weight"
                                        name="weight"
                                        value=""
                                        placeholder="weight"
                                    /><br />
                                    <label for="src_tg"></label>
                                    <input
                                        class="input_style"
                                        type="text"
                                        id="src_tg"
                                        name="src_tg"
                                        value=""
                                        placeholder="src-tg-num"
                                    /><br />
                                    <button class="btn btn-default" onclick="addEdge()">
                                        Add edges
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="nodeid"></label>
                                    <input
                                        class="input_style"
                                        type="text"
                                        id="nodeid"
                                        name="nodeid"
                                        value=""
                                        placeholder="Node ID"
                                    /><br />
                                    <button class="btn btn-default" onclick="removeNode()">
                                        Remove nodes
                                    </button>
                                </td>
                                <td>
                                    <label for="r_src_tg"></label>
                                    <input
                                        class="input_style"
                                        type="text"
                                        id="r_src_tg"
                                        value=""
                                        placeholder="src-tg-num"
                                    /><br />
                                    <button class="btn btn-default" onclick="removeEdge()">
                                        Remove edges
                                    </button>
                                </td>
                            </tr>
                        </table>

                        <button class="btn" onclick="removeSelected()">Remove selected</button>
                        <button class="btn btn-default" onclick="addEdgeBetweenSelected()">
                            Add edges between selected
                        </button>
                    </div>
                    <div class="SH" onclick="ShowHide('action_div', this)">◢ Actions</div>
                    <div id="action_div">
                        <button class="btn btn-default" onclick="generateGraph()">
                            Generate Random Graph
                        </button>
                        <br />

                        <label for="simple" class="cb checkbox">
                            <input
                                type="checkbox"
                                id="simple"
                                checked
                                onchange="hideWeight(this)"
                            />Simple </label
                        >&nbsp;
                        <label id="wlabel" for="weighted" class="cb checkbox">
                            <input type="checkbox" id="weighted" />Weighted </label
                        ><br />
                        <button class="btn btn-default" onclick="Kn()">K<sub>n</sub></button>
                        <button class="btn btn-default" onclick="Kn_n()">K<sub>n,n</sub></button>
                        <br />
                    </div>
                    <div class="SH" onclick="ShowHide('matrix_div', this)">
                        ◢ Create from Matrix
                    </div>
                    <div id="matrix_div">
                        <label for="matrix_input"></label>
                        <textarea
                            id="matrix_input"
                            rows="5"
                            cols="28"
                            wrap="off"
                            style="overflow-x: auto;overflow-y: auto"
                        ></textarea
                        ><br />
                        <button class="btn btn-default" onclick="readAM()">From AM</button>
                        <button class="btn btn-default" onclick="readWM()">From WM</button>
                        <!--<button onclick="readGraphML()">From XML</button>-->
                        <br />
                    </div>
                    <div class="SH" onclick="ShowHide('algorithms_div', this)">◢ Algorithms</div>
                    <div id="algorithms_div">
                        <label for="algorithms"></label>
                        <select id="algorithms" style="font-size: 16px; margin-bottom: 5px;">
                            <option value="breadthFirstSearch()">Breadth First Search</option>
                            <option value="depthFirstSearch()">Depth First Search</option>
                            <option value="performKruskal()">Kruskal</option>
                            <option value="prim()">Prim</option>
                            <option value="performDijkstra()">Dijkstra</option>
                            <option value="myDijkstra()">Dijkstra (detailed)</option>
                            <option value="findBridge()">Bridge Finding Algorithm</option>
                            <option value="minimalWeightCycle()">Minimal Weight Cycle</option>
                            <option value="eulerianCycle()">Eulerian Trial/Cycle</option>
                            <option value="pathTreeFlower()">Min/Max Weight Matching</option>
                            <option value="CPP()">Chinese Postman Problem</option>
                            <option value="hamiltonianPath()">Hamiltonian Path/Cycle</option>
                            <option value="nearestNeighbor()">Nearest Neighbor Algorithm</option>
                            <option value="TSPGlobalLowerBound()">TSP Lower Bound</option>
                            <option value="heldKarp(false)">Held Karp</option>
                        </select>
                        <br />
                        <label for="animation" class="cb checkbox">
                            <input
                                id="animation"
                                type="checkbox"
                                value="Animation"
                                style="font-size: 16px;"
                                checked
                                onclick="hideDuration(this)"
                            />Animation </label
                        >&nbsp;
                        <label id="label-duration" for="duration">
                            <input
                                type="number"
                                value="700"
                                step="10"
                                min="0"
                                max="100000"
                                style="width: 50px;"
                                id="duration"
                            />&nbsp;ms </label
                        ><br />
                        <button
                            class="btn btn-primary"
                            id="perform"
                            onclick="callToAlgorithms()"
                            style="font-size: 15px; font-weight: bold;"
                        >
                            Perform
                        </button>
                        <button
                            class="btn btn-primary"
                            style="font-size: 15px; font-weight: bold;"
                            onclick="stopAnimation()"
                        >
                            Stop Animation
                        </button>
                        <br />
                    </div>
                </td>
                <td style="text-align: left; vertical-align: top;">
                    <table>
                        <tr>
                            <td style="vertical-align: top">
                                <p class="title" style="margin: 5px auto 5px auto">Source</p>
                                <div id="cy"></div>
                                <div style="width: 500px; margin: auto auto; text-align: center">
                                    <span style="font-weight: bold">Total Weight:&nbsp;</span>
                                    <span id="cy_weight">0</span><br />
                                    <button class="btn btn-small" onclick="enableDrawing(this)">
                                        Enable drawing
                                    </button>
                                    <button class="btn btn-small" onclick="getAM(cy, true, false)">
                                        Get AM
                                    </button>
                                    <button class="btn btn-small" onclick="getWM(cy, true, false)">
                                        Get WM
                                    </button>
                                    <button class="btn btn-small" onclick="clearCyStyle()">
                                        Clear Color
                                    </button>
                                    <button
                                        class="btn btn-small btn-danger"
                                        onclick="clearSource()"
                                    >
                                        Clear Elements
                                    </button>
                                </div>
                            </td>
                            <td id="ca_tab" style="vertical-align: top;">
                                <p class="title" style="margin: 5px auto 5px auto">Result</p>
                                <div id="ca"></div>
                                <div style="width: 500px; margin: auto auto; text-align: center">
                                    <span style="font-weight: bold">Total Weight:&nbsp;</span>
                                    <span id="ca_weight">0</span><br />
                                    <div id="path" style="width: 500px;"></div>
                                    <button class="btn btn-small" onclick="getAM(ca, true, false)">
                                        Get AM
                                    </button>
                                    <button class="btn btn-small" onclick="getWM(ca, true, false)">
                                        Get WM
                                    </button>
                                    <button class="btn btn-small" onclick="clearCaStyle()">
                                        Clear Color
                                    </button>
                                    <button
                                        class="btn btn-small btn-danger"
                                        onclick="clearResult()"
                                    >
                                        Clear Elements
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: center">
                                <p style="margin-top: 5px; margin-bottom: 5px;">
                                    Click
                                    <a href="undirected-graph-help.html" target="_blank">here</a> to
                                    see instructions. Developed and maintained by Hanzhi Zhou, based
                                    on
                                    <a href="http://js.cytoscape.org/" target="_blank"
                                        >Cytoscape.js</a
                                    ><br />
                                </p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <script src="js/style-undirected.js?ver=2"></script>
        <script src="js/main-common.js?ver=3"></script>
        <script src="js/main-undirected.js?ver=2"></script>
        <script src="js/max-weight-matching.js?ver=2"></script>
        <script src="js/held-karp.js?ver=2"></script>
    </body>
</html>
